博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
layui上传图片,预览图片,删除图片,放大预览
阅读量:4097 次
发布时间:2019-05-25

本文共 1280 字,大约阅读时间需要 4 分钟。

界面选择图片后如下显示:

点击每张图片的时候,放大预览

 

 

var upload = layui.upload;
关键代码:选择图片后
 
choose: function (obj) {    //将每次选择的文件追加到文件队列    var files = obj.pushFile();    //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)    obj.preview(function (index, file, result) {        if (file.size > 0 && $('#ImgPreview').find('img').length === 0) {            $('#ImgPreview').empty();        }        // 添加图片 ImgPreview-预览的dom元素的id        $('#ImgPreview').append('
' + '
' + file.name + '
'); //删除某图片 $("#upload_img_" + index).bind('click', function () { delete files[index];/ $("#container"+index).remove(); }); //某图片放大预览 $("#showImg"+index).bind('click',function () { var width = $("#showImg"+index).width(); var height = $("#showImg"+index).height(); var scaleWH = width/height; var bigH = 600; var bigW = scaleWH*bigH; if(bigW>900){ bigW = 900; bigH = bigW/scaleWH; } // 放大预览图片 layer.open({ type: 1, title: false, closeBtn: 1, shadeClose: true, area: [bigW + 'px', bigH + 'px'], //宽高 content: "" }); }); });

 

 

 

 

 

你可能感兴趣的文章
HTML&CSS进阶
查看>>
Servlet进阶和JSP基础
查看>>
servlet&jsp 的使用以及jsp的历史遗留用法
查看>>
servlet中的cookie和session
查看>>
过滤器及JSP九大隐式对象
查看>>
软件(项目)的分层
查看>>
菜单树
查看>>
2019年百度校招面试题《Java开发工程师》
查看>>
Java 8 中的 Streams API 详解
查看>>
mysql基础优化
查看>>
MySQL约束笔记
查看>>
MySQL基础
查看>>
MySQL多表&事务基础笔记
查看>>
JDBC连接池&JDBCTemplate基础笔记
查看>>
oracle错误码及解决方法
查看>>
Oracle协议适配器错误解决办法
查看>>
张一鸣:10年面试2000人,我发现混的好的人,全都有同一个特质
查看>>
小球反弹(一小球从100米自由下落)
查看>>
求1到10000所有完全数
查看>>
求数组中最大和次大的两个数
查看>>